import React, { useState, useEffect } from 'react'
import './index.css'
import { useNavigate, useParams } from 'react-router-dom'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined
} from '@ant-design/icons'
import axios from 'axios'
import { Layout, Menu, Button, theme } from 'antd'
import type { MenuProps } from 'antd'
// import SubMenu from 'antd/es/menu/SubMenu'
const { SubMenu } = Menu
type MenuItem = Required<MenuProps>['items'][number]
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group'
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type
  } as MenuItem
}
const { Header, Sider, Content } = Layout
const {
  role: { rights },
  username
} = JSON.parse(localStorage.getItem('token') || '{}')
const checkPagePermission = (items: any) => {
  return items.pagepermisson === 1 && rights.includes(items.key)
}

// const items: MenuProps['items'] = menuMockItems.map((item: any) => {
//   return getItem(item?.label, item?.key, item?.icon, item?.children, item?.type)
// })
export default function SideMenu() {
  useEffect(() => {
    axios.get('/rights?_embed=children').then((res) => {
      console.log(res.data)
      setMenu(res.data)
      // setMenu(renameTitleToLabel(res.data))
    })
  }, [])

  const renderMenu = (menuList: any[]) => {
    return menuList.map((item) => {
      if (item.children?.length > 0 && checkPagePermission(item)) {
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {renderMenu(item.children)}
          </SubMenu>
        )
      }
      return (
        checkPagePermission(item) && (
          <Menu.Item key={item.key} icon={item.icon} onClick={() => router(item.key)}>
            {item.title}
          </Menu.Item>
        )
      )
    })
  }
  const [collapsed, setCollapsed] = useState(false)
  const [menu, setMenu] = useState<MenuItem[]>([])
  const router = useNavigate()
  const params = useParams()
  console.log(window.location)

  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e)
    router(e?.key)
    selectKeys.push(e.key)
    openKeys.push(e.keyPath[1])
  }
  const selectKeys: any[] = [window.location.href.split('#')[1]]
  const openKeys: any[] = ['/' + window.location.hash.split('/')[1]]
  return (
    <Sider trigger={null} collapsible collapsed={collapsed}>
      <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
        <div className="demo-logo-vertical">全球新闻发布管理系统</div>
        {/* items={menu} */}
        <div style={{ flex: 1, overflow: 'auto' }}>
          <Menu
            theme="dark"
            mode="inline"
            defaultOpenKeys={openKeys}
            defaultSelectedKeys={selectKeys}
            onClick={onClick}
          >
            {renderMenu(menu)}
          </Menu>
        </div>
      </div>
    </Sider>
  )
}
